{% extends 'layout.html' %}
{% load static %}

{% block title %} 登录界面 {% endblock %}
{% block BodyClass %}page-title{% endblock %}

{% block contect %}
<main class="main">
    <div class="page-title" data-aos="fade">
        <div class="container d-lg-flex justify-content-between align-items-center">
            <h1 class="mb-2 mb-lg-0"></h1>
            <nav class="breadcrumbs">
                <ol>
                    <li><a href="{% url 'index'%}"></a></li>
                    <li class="current"></li>
                </ol>
            </nav>
        </div>
    </div><!-- End Page Title -->

    <section id="login-section" class="login-section section">
        <div class="container section-title" data-aos="fade-up">
            <h2 class="text-center mb-5">欢迎登录</h2>

            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-8 col-lg-6">
                        <div class="card border-0 shadow-lg">
                            <div class="card-body p-5">
                                <form method="post" class="needs-validation" novalidate>


                                    <!-- 用户名输入 -->
                                    <div class="mb-4">
                                        <label for="username" class="form-label fw-bold text-secondary">用户名</label>
                                        <input
                                            type="text"
                                            class="form-control form-control-lg rounded-3"
                                            id="username"
                                            name="username"
                                            placeholder="请输入用户名"
                                            required
                                        >
                                    </div>

                                    <!-- 密码输入 -->
                                    <div class="mb-4">
                                        <label for="password" class="form-label fw-bold text-secondary">密码</label>
                                        <input
                                            type="password"
                                            class="form-control form-control-lg rounded-3"
                                            id="password"
                                            name="password"
                                            placeholder="请输入密码"
                                            required
                                        >
                                    </div>

                                    <!-- 登录按钮 -->
                                    <button
                                        type="submit"
                                        class="btn btn-secondary btn-lg w-100 rounded-pill py-3 mt-3"
                                    >
                                        立即登录
                                    </button>

                                    <!-- 注册链接 -->
                                    <div class="text-center mt-4">
                                        <span class="text-muted">还没有账号？</span>
                                        <a
                                            href="{% url 'work-register' %}"
                                            class="text-decoration-none fw-bold text-primary"
                                        >
                                            立即注册
                                        </a>
                                    </div>

                                    <!-- 错误提示 -->
                                    {% if form.non_field_errors %}
                                        <div class="alert alert-danger mt-4 p-3 rounded-3" role="alert">
                                            {% for error in form.non_field_errors %}
                                                <i class="bi bi-exclamation-circle me-2"></i>{{ error }}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

<style>
    .card {
        transition: transform 0.3s ease;
    }
    .card:hover {
        transform: translateY(-5px);
    }
    .form-control {
        border: 2px solid #e9ecef;
    }
    .form-control:focus {
        border-color: #2e7c90;
        box-shadow: 0 0 0 0.25rem rgba(46, 124, 144, 0.25);
    }
</style>
{% endblock %}